{% extends "users/base.html" %}
{% from "users/includes/notification_macros.html" import notification_fxa_updated, notification_fxa_created, notification_sumo_deprecation %}

{% set title = _('Edit Profile') %}
{% set classes = 'profile' %}
{% set active = 'edit-profile' %}
{% set crumbs = [(profile_url(profile.user), profile.user.username), (None, title)] %}

{% block above_main %}
  {% if fxa_messages %}
    {% for message in fxa_messages %}
      {% if message == 'fxa_notification_updated' %}
        {{ notification_fxa_updated(STATIC_URL) }}
      {% elif message == 'fxa_notification_created' %}
        {{ notification_fxa_created(STATIC_URL) }}
      {% elif message == 'fxa_notification_deprecation_warning' %}
        {{ notification_sumo_deprecation(STATIC_URL) }}
      {% endif %}
    {% endfor %}
  {% endif %}
{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block content %}
  <div class="grid_9">
    <article id="edit-profile" class="main">
      {% if profile and profile.is_fxa_migrated %}
      <h1>{{ _('Account') }}</h1>
      <p class="mb-0"><strong>{{ user.email }}</strong></p>
      <p class="helptext">
        {{ _('You can change your email address on Firefox Accounts.') }}
        <a href="https://support.mozilla.org/en-US/kb/change-primary-email-address-firefox-accounts">{{ _('Need help?') }}</a>
      </p>

      <div class="manage-account">
        <a href="https://accounts.firefox.com/settings" target="_blank" class="button">{{ _('Manage Firefox Account') }}</a>
      </div>

      <hr class="section-break"/>
      {% endif %}

      <h1>{{ title }}</h1>
      <p>
        {% trans %}
        Tell users a bit more information about yourself. Most fields are
        optional, but they'll help other users get to know you better.
        {% endtrans %}
      </p>
      <form method="post" action="">
        {% csrf_token %}
        <ul>
          {% if request.user == profile.user %}
            <li>
              <label>{{ _('Avatar:') }}</label>
              <div class="edit-profile-avatar">
                <figure class="avatar-preview">
                    <img class="avatar" src="{{ profile_avatar(profile.user) }}" alt="">
                </figure>
                {% if not profile.is_fxa_migrated %}
                  <a class="change-avatar" href="https://gravatar.com/emails" target="_blank">
                    {{ pgettext('avatar', 'Choose Photo') }}
                    <span class="tip">
                      {% trans %}
                        <p>
                          SUMO is now using Gravatars as avatars. You must change
                          your Gravatar on gravatar.com.
                        </p>
                        <p>
                          It can take a few minutes for the avatar change to take
                          effect. You may need to wait a few minutes and reload
                          the page to see your new Gravatar.
                        </p>
                      {% endtrans %}
                    </span>
                  </a>
                  {% if profile.avatar %}
                    <a class="remove-avatar" href="{{ url('users.delete_avatar') }}">{{ _('Delete') }}</a>
                  {% endif %}
                {% endif %}
              </div>
            </li>
            {% if not profile.is_fxa_migrated %}
              <li>
                <label>{{ _('Password:') }}</label>
                <a href="{{ url('users.pw_change') }}">{{ _('Change') }}</a>
              </li>
              <li>
              <label>{{ _('Email:') }}</label>
              {{ user.email }}
                <a href="{{ url('users.change_email') }}">{{ _('Change') }}</a>
              </li>
            {% endif %}
          {% endif %}
          {{ form.as_ul()|safe }}
        </ul>
        <div class="submit">
          <button class="button dark" type="submit">{{ _('Update My Profile') }}</button>
          <button class="button transparent" type="reset">Cancel</button>
        </div>
      </form>
      {% if request.user == profile.user %}
      <p class="center-on-mobile border-top-on-mobile">
        <a id="delete-profile" href="javascript:;" class="warning-link mt-0">{{ _('Close account and delete all profile information') }}</a>
      </p>
      {% endif %}
    </article>

    {% if request.user == profile.user %}
    <div class="kbox" title="{{ _('Are you sure') }}" data-target="#delete-profile" data-modal="true">
      <form method="post" action="{{ url('users.close_account') }}">
        {% csrf_token %}
        <p>
          {{ _('Deleting your account will prevent you from answering or posting questions in Mozilla Support. This action will clear your profile and cannot be restored again.') }}
        </p>
        <p>
          {{ _('Please type in your username to confirm') }}
        </p>
        <p>
          <input id="delete-profile-username-input" name="entered_username" type="text">
          <input id="delete-profile-username" name="account_username" type="hidden" value="{{ profile.user.username }}">
        </p>
        <p>
          <button type="submit" id="delete-profile-button" class="button warning" disabled>{{ _('Delete My Account') }}</button>
        </p>
      </form>
    </div>
    {% endif %}
  </div>
{% endblock %}
